<script setup>
import { ref, onMounted } from 'vue'
import { GetFinishOrderAPI, GetOrderAllDataAPI } from '@/apis/order';
import { ElMessage } from 'element-plus';

const tableData = ref()
const getData = async () => {
  const result = await GetOrderAllDataAPI(4)
  console.log(result);
  tableData.value = result
}

const clickFn = async (id) => {
  try {
    await GetFinishOrderAPI(id)
  } catch (error) {
    ElMessage.error('收货失败')
  }
  await getData()
  ElMessage.success('收货成功')
}

const loading = ref(true)
onMounted(async() => {
  await getData()
  loading.value = false
})
</script>

<template>
          <el-table 
            :data="tableData" 
            height="500"
            v-loading="loading"
            element-loading-text="加载中..."
          >
            <el-table-column prop="orderId" label="订单号" width="80" />
            <el-table-column prop="shopName" label="图书" width="70" />
            <el-table-column prop="user" label="购买人" width="70"/>
            <el-table-column prop="payTime" label="支付时间" width="120" />
            <el-table-column prop="payMoney" label="支付金额" width="80" />
            <el-table-column prop="phone" label="联系方式" width="120"/>
            <el-table-column prop="address" label="收货地址" width="170"/>
            <el-table-column  label="操作" width="120">
              <template #default="{row}">
                <el-check-tag :size="small" checked @click="clickFn(row.orderId)">确认收货</el-check-tag>
              </template>
            </el-table-column>
          </el-table>
</template>